<template>
    <div class="orderTicket">
        <div class="nav">
            <div v-for="(nav, index) in navs"
                 :key="index"
                 :class="[nav.id == componentId?'check':'', 'tab']"
                 @click="check(nav.id)"
            >
                {{nav.name}}
            </div>
        </div>
        <div class="content">
            <person  :needLogin="2"></person>
        </div>
    </div>
</template>

<script>
    import person from './person/index2'
    export default {
        name: 'publicTicket',
        components: {
            person,
        },
        data() {
            return {
                navs: [
                    {
                        name: '散客预约',
                        id: 'person'
                    },
                    // {
                    //     name: '团队预约',
                    //     id: 'team'
                    // }
                ],
                componentId: 'person'
            }
        },
        created() {
            let api_token = this.$route.query.api_token
            if(api_token) {
                localStorage.setItem('api_token', this.$route.query.api_token || '');
            }
        },
        methods: {
            check(id) {
                this.componentId = id
            }
        }
    }
</script>

<style lang="scss" scoped>
    .orderTicket{
        width: 100vw;
        // margin: 0 auto;
        min-height: 100vh;
        background: #EEEEEE;
        .nav{
            width: 100%;
            height: 78px;
            display: flex;
            padding: 30px 30px 0 30px;
            background: #ffffff;
            .tab{
                font-size:34px;
                font-weight:500;
                color:rgba(100,100,100,1);
                margin-right: 52px;
                &.check{
                    color: #323232;
                    font-weight:bold;
                    background: linear-gradient(0deg, rgba(241,127,42,1),rgba(255,255,255,1), rgba(255,255,255,1));
                }
            }
        }
    }
</style>